<template>
  <Dialog
    v-model="dialogVisible"
    :title="t('reviewJudgeScene.judgeRules.title')"
    width="80%"
    max-height="400px"
    :scroll="true"
    :fullscreen="false"
    :show-close="false"
  >
    <div v-html="content" class="rule-content"></div>

    <template #footer>
      <div class="flex justify-center items-center">
        <el-button type="primary" @click="confirmAlert()" :disabled="countdown > 0">
          {{ t('common.ok') }}<span v-if="countdown > 0">({{ countdown }})</span>
        </el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { useCache } from '@/hooks/web/useCache'

defineOptions({ name: 'JudgeRules' })

const { t } = useI18n() // 国际化
const { wsCache } = useCache()

const dialogVisible = ref(false) // 弹窗的是否展示
const content = ref('')

// const open = (rule: string) => {
//   content.value = rule
//   dialogVisible.value = true
// }

// 评审规则强提醒倒计时
const countdown = ref(10)
// 评审规则倒计时走字
const startCountdown = () => {
  // 如果countdown的值不为0 则每秒-1 直到归零停止
  if (countdown.value > 0) {
    setTimeout(() => {
      countdown.value--
      startCountdown()
    }, 1000)
  }
}

// 显示第一个评审规则强提醒
const open = (rule: string) => {
  const flag: boolean = wsCache.get('instance-review-rules-tips')
  content.value = rule
  // 显示弹窗
  dialogVisible.value = true
  // 倒计时10秒
  countdown.value = flag ? 0 : 10
  // 开始计时
  startCountdown()
}

// 确认提醒
const confirmAlert = () => {
  dialogVisible.value = false
  countdown.value = 0
  // 保存已经确认过的状态
  wsCache.set('instance-review-rules-tips', true, {
    // 缓存1天
    exp: 86400
  })
}

defineExpose({
  open
})
</script>

<style scoped lang="scss">
.rule-content {
  max-width: 100%;
}
</style>
